<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>注册页面</title>
  <!--    引入格式文件-->
  <link rel="stylesheet" href="./css/reg.css" />
</head>

<body>
  <style></style>
  <div class="rg_layout">
    <div class="rg_left">
      <p>新用户注册</p>
      <p>USER REGISTER</p>
    </div>
    <div class="rg_center">
      <div class="rg_form">
        <form action="#" method="post">
          <table>
            <tr>
              <td class="td_left"><label for="username">用户名</label></td>
              <td class="td_right">
                <input type="text" id="username" name="username" />
              </td>
            </tr>
            <tr>
              <td class="td_left"><label for="password">密码</label></td>
              <td class=" td_right">
                <input type="password" id="password" name="password" />
              </td>
            </tr>
            <tr>
              <td class="td_left"><label for="phone">手机号</label></td>
              <td class="td_right">
                <input type="text" id="phone" name="phone" />
              </td>
            </tr>
            <tr>
              <td class="td_left"><label for="">性别</label></td>
              <td class="td_right" id="sex">
                <label><input type="radio" name="sex" value="1" checked />男</label>&nbsp;&nbsp;&nbsp;
                <label><input type="radio" name="sex" value="0" />女</label>
              </td>
            </tr>
            <tr>
              <td class="td_left"><label for="">是否VIP</label></td>
              <td class="td_right" id="vip">
                <label><input type="radio" name="vip" value="1" />是</label>&nbsp;&nbsp;&nbsp;
                <label><input type="radio" name="vip" value="0" checked />否</label>
              </td>
            </tr>
            <tr>
              <td class="td_left"><label for="question">密保问题</label></td>
              <td class="td_right">
                <input type="text" id="question" name="question" />
              </td>
            </tr>
            <tr>
              <td class="td_left"><label for="answer">密保答案</label></td>
              <td class="td_right">
                <input type="text" id="answer" name="answer" />
              </td>
            </tr>
            <tr>
              <td class="td_left"><label for="avatar">头像</label></td>
              <td class="td_right">
                <input type="text" id="avatar" name="avatar" />
                <button id="select">选择图片</button>
                <input type="file" hidden />
              </td>
            </tr>
            <tr>
              <td colspan="2" align="center">
                <input type="submit" value="立即注册" id="btn_sub" name="res" />
              </td>
            </tr>
          </table>
        </form>
      </div>
    </div>
    <div class="rg_right">
      <p>已有账号？<a href="javascript:;" id="login">立即登录</a></p>
    </div>
  </div>
  <script src="./lib/axios.js"></script>
  <script>

    // http://124.223.14.236:3001/api
    axios.defaults.baseURL = 'http://124.223.14.236:3001/api'

    // 封装获取元素
    const qs = ele => document.querySelector(ele)

    // 表单提交事件
    qs('form').addEventListener('submit', async function (e) {
      e.preventDefault()
      const reg_phone = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
      const reg_pwd = /^[\d]{6,12}$/
      if (!reg_pwd.test(qs("#password").value)) return alert("密码必须6到12位,且不能出现空格")
      if (!reg_phone.test(qs("#phone").value)) return alert("请输入正确的手机格式")

      let data = {
        username: qs('#username').value,
        password: qs('#password').value,
        phone: qs('#phone').value,
        sex: parseInt(qs('[name=sex]').value),
        vip: parseInt(qs('[name=vip]').value),
        question: qs('#question').value,
        answer: qs('#answer').value,
      }
      await axios({
        method: 'POST',
        url: '/user/reg',
        data,
      }).then(({ data }) => {
        if (!data.success) alert(data.msg)
        alert('注册成功')
        qs('#login').click()
      })
    })


    // 立即登录点击事件
    qs('#login').addEventListener('click', () => {
      location.href = '../01-loginBaseCode/login.html'
    })


  </script>


</html>